<template>
  <div class="app">
    <myNavbar title="团长订单"></myNavbar>
        	<div class="coupon_choose">
		          <div class="coupon_choose-list" @click="swichNav">
			          <text  :class="[currentTab==1?'coupon_choose_title':'coupon_choose_title_no']">进行中</text>
			          <text :class="[currentTab==1?'coupon_choose_line_no':'']"></text>
		          </div>
		           <div class="coupon_choose-list"  @click="swichNavagin">
			          <text  :class="[currentTab==4?'coupon_choose_title':'coupon_choose_title_no']">已完成</text>
			          <text  :class="[currentTab==4?'coupon_choose_line_no':'']"></text>
		           </div>
	         </div>
           <div>
                <scroller class="groupCard_content" scroll-direction='horizontal'>
                     <div class="groupCard_item" v-for="(item,index) in groupBuyName" @click="nameclick(item)">
                      <text :class="[item.id==clickId?'groupCard_item_text':'groupCard_item_text_two']">{{item.name}}</text>
                      <div :class="[item.id==clickId?'groupCard_item_text_div':'']"></div>
                    </div>
                </scroller>
           </div>
    <list>
      <refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
        <text class="indicator-text">{{refreshTitle}}</text>
      </refresh>
      <cell>
            <text class="indicator-sum" v-if="queryDate">日期:{{queryDate}}</text>
      </cell>
      <cell>
        <gourp-order v-for="item in groupOrderList" :orderData="item" @loadList='loadList'></gourp-order>
      </cell>
      <cell style="flex: 1;">
        <noData v-if="groupOrderList.length == 0" subTitle="可以去看看有哪些想买的" noDataText="您还没有相关的订单"></noData>
      </cell>
      <loading class="loading" v-if="groupOrderList.length >= 10" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
        <text class="indicator-text">加载中...</text>
      </loading>
    </list>
  </div>
</template>

<script>
import myNavbar from "../../../components/myNavbar/myNavbar";
import { list } from '../../../api/groupOrder'
import { list as groupBuyList } from '../../../api/groupBuy'
import gourpOrder from '../../../components/groupOrder/indexQuery'
import noData from "../../../components/noData/noData";
export default {
  name: "order",
  data(){
    return{
      currentTab:1,
      groupOrderList:[],
      pageNum: 1,
      pageSize: 10,
        total:0,
      loadinging:false,
      refreshing:false,
      refreshTitle:'释放刷新页面...',
      groupBuyName:[],
      clickId:"",
      item:{},
      queryDate:null
    }
  },
  components:{
    myNavbar,gourpOrder,noData
  },
  created(){


    this.loadGroupBuy()
    if(app.config.params.date){
      this.queryDate = app.config.params.date
    }else {
      this.queryDate =''
    }

    console.log("22222222222222222222222")
    console.log(app.config.params)


  },
  mounted () {

  },
  methods:{
    nameclick(data){

      this.pageNum=1
      this.clickId=data.id
      this.loadList()
    },
     swichNav(){
         this.pageNum=1
        this.currentTab=1
        this.loadList()
    },
      swichNavagin(){
          this.pageNum=1
        this.currentTab=4
         this.loadList()
      },
     loadGroupBuy(){
      var _this = this
         groupBuyList({mchId:_this.getGlobalData().mchId,isShow:false,type:2
         }).then(res=>{
             _this.groupBuyName= res.data.data
             if (_this.groupBuyName.length>0) {
                 _this.clickId = this.groupBuyName[0].id;
                 _this.loadList()
             }
         })
      },
    loadList(){

      var _this = this
      list({pageNum:_this.pageNum,pageSize:_this.pageSize,orderStatus:this.currentTab,allChild:true,groupBuyId:this.clickId,
          startDate:_this.queryDate,endDate:_this.queryDate
      }).then(res=>{
          if (this.pageNum == 1) {
              this.groupOrderList=[]
          }
          res.data.data.forEach(function (item){
            item.createDate = _this.formatTime(item.createDate)
            if (item.itemList.length > 0){
              item.itemList.forEach(function (items){
                items.thumbnail = _this.thumbnail(items.thumbnail,340,340)
              })
            }
              _this.groupOrderList.push(item)
          })

          _this.total = res.data.total
      })

    },
    onrefresh(event) {
      this.refreshing = true
      this.refreshTitle = '加载中...'
      setTimeout(() => {
        this.pageNum=1
        this.refreshing = false
        this.loadList()
      }, 1000)
    },
    onpullingdown(event) {
      this.refreshTitle = '释放刷新页面...'
    },
    onloading(event) {
      this.loadinging = true
      setTimeout(() => {
        this.loadinging = false
        this.pageNum += 1
        this.loadList()
      }, 1000)
    },
  }
}
</script>

<style scoped>
.app{
  background-color: rgba(248, 248, 248, 1);
}
.coupon_choose {
  /* position: fixed; */
  width: 750px;
  text-align: center;
  line-height: 80px;
  padding-left: 26px;
  padding-right: 26px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 76px;
  background-color: #fff;
}
.coupon_choose-list {
  width: 300px;
  height: 70px;
  display: flex;
  flex-direction: column;
  align-items:center;
  justify-content: center;
}
.coupon_choose_title {
  font-size: 32px;
  font-weight: 500;
  padding-bottom: 5px;
  color: rgba(215, 38, 28, 1);
  margin-bottom: 5px;

}
.coupon_choose_title_no {
  /*font-size: 28px;*/
  font-size: 32px;
  font-weight: 500;
  padding-bottom: 5px;
  color: rgba(102, 102, 102, 1);
}
.coupon_choose_line {
  width: 34px;
  height: 6px;
}
.coupon_choose_line_no {
    background-color: rgb(231, 91, 83);
    height: 4px;
    width: 50px;
}
.refresh {
  width: 750px;
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
.loading {
  width: 750px;
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
}
.indicator-text {
  color: #888888;
  font-size: 22px;
  text-align: center;
  padding-top: 20px;
}

.indicator-sum {
    color: red;
    font-size: 28px;
    /*text-align: center;*/
    padding: 20px;
    background-color: #fff;
    margin: 10px 20px;
    border-radius: 16px;
}

.groupCard_content{
  width: 710px;
  height: 80px;
  display: flex;
  flex-direction: row;
}
.groupCard_item{
  height: 80px;
  align-items: center;
  margin-left: 20px;
  margin-right: 30px;
  border-radius: 16px;
}
.groupCard_item_text{
  font-size:32px;
  font-weight: bold;
  color:rgb(231, 91, 83);;
  margin-top:20px;
  text-align:center;
}
.groupCard_item_text_two{
  font-size:28px;
  /* font-weight: bold; */
  color:black;
  margin-top:20px;
  text-align:center;
}
.groupCard_item_text_div{
  width: 70px;
  background-color:rgb(231, 91, 83);;
  height: 7px;
  /*margin-left:20px;*/
  margin-top: 5px;
}
</style>
